<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{mainSum}}</strong></span>
    <ul class="filters">
      <li>
        <!-- 添加样式 -->
        <a @click="$emit('changeClick','all')"   :class="{selected:type=== 'all'}" href="javascript:;" >全部</a>
      </li>
      <li>
        <a  @click="$emit('changeClick','no')" :class="{selected:type=== 'no'}" href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="$emit('changeClick','yes')" :class="{selected:type=== 'yes'}" href="javascript:;" >已完成</a>
      </li>
    </ul>
    <button class="clear-completed"  @click="clearFn" v-show="Clear">清除已完成</button>
  </footer>
</template>

<script>
export default {
   props:{
    list:{
      type:Array,
      required:true
    },
    type:String,
    //all全选 no 未完成 yes是完成
   },
   computed:{
    mainSum(){
      // ！！1用filter！ 返回为true的数据 那没有选中的就是剩下的 item.isDone取反 返回的数组的长度就是剩余量 
      return this.list.filter((item)=>!item.isDone).length
    },
    Clear(){
      //遍历只要满足条件就返回item.isDone为true
      return this.list.some(item=>item.isDone)
    }
   },
   methods:{
    clearFn(){
      this.$emit('clear',)
    }
   }
}
</script>